<template>
  <div class="english-quiz-container">
    <!-- 顶部导航栏 -->
    <nav class="quiz-nav">
      <h2>英语单选题练习</h2>
      <div class="quiz-stats">
        <span>题目总数: {{ questions.length }}</span>
        <span class="separator">|</span>
        <span>已答: {{ answeredCount }}</span>
        <span v-if="isSubmitted" class="separator">|</span>
        <span v-if="isSubmitted" class="score">得分: {{ score }}分</span>
      </div>
    </nav>

    <!-- 题目区域 -->
    <div class="questions-wrapper">
      <div 
        v-for="(question, index) in questions" 
        :key="index" 
        class="question-block"
        :class="{
          'completed': question.userAnswer !== null,
          'correct': isSubmitted && question.userAnswer === question.correct,
          'incorrect': isSubmitted && question.userAnswer !== null && question.userAnswer !== question.correct
        }"
      >
        <!-- 题号和问题 -->
        <div class="question-header">
          <span class="question-index">{{ index + 1 }}.</span>
          <p class="question-text">{{ question.text }}</p>
        </div>

        <!-- 选项列表 -->
        <div class="options-list">
          <label 
            v-for="(option, optIdx) in question.options" 
            :key="optIdx"
            class="option-item"
            :class="{
              'selected': question.userAnswer === optIdx,
              'correct': isSubmitted && optIdx === question.correct,
              'wrong': isSubmitted && question.userAnswer === optIdx && optIdx !== question.correct
            }"
          >
            <input 
              type="radio" 
              name="question-{{ index }}"
              :checked="question.userAnswer === optIdx"
              @change="handleOptionSelect(index, optIdx)"
              :disabled="isSubmitted"
              class="option-input"
            >
            <span class="option-letter">{{ String.fromCharCode(65 + optIdx) }}</span>
            <span class="option-content">{{ option }}</span>
          </label>
        </div>

        <!-- 答案解析（提交后显示） -->
        <div v-if="isSubmitted" class="explanation">
          <h4>解析：</h4>
          <p>{{ question.explanation }}</p>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button 
        @click="handleSubmit" 
        class="submit-btn"
        :disabled="isSubmitted || answeredCount < questions.length"
      >
        提交答案
      </button>
      <button 
        @click="handleReset" 
        class="reset-btn"
      >
        重新开始
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 题目数据
const questions = ref([
  {
    text: "What ____ you do every morning?",
    options: ["are", "do", "does", "is"],
    correct: 1,
    explanation: "主语是第二人称 you，一般现在时的助动词用 do。",
    userAnswer: null
  },
  {
    text: "She ____ in this city for 10 years.",
    options: ["lives", "lived", "has lived", "is living"],
    correct: 2,
    explanation: "for 10 years 表示持续到现在的时间段，用现在完成时 has lived。",
    userAnswer: null
  },
  {
    text: "If it ____ tomorrow, we will stay at home.",
    options: ["rain", "rains", "rained", "will rain"],
    correct: 1,
    explanation: "if 引导的条件状语从句，主句用将来时，从句用一般现在时。",
    userAnswer: null
  },
  {
    text: "This is the book ____ I bought yesterday.",
    options: ["what", "who", "whom", "which"],
    correct: 3,
    explanation: "定语从句修饰物 the book，关系代词用 which。",
    userAnswer: null
  },
  {
    text: "He speaks English ____ than his sister.",
    options: ["good", "better", "best", "well"],
    correct: 1,
    explanation: "than 是比较级的标志，good 的比较级是 better。",
    userAnswer: null
  }
]);

// 状态管理
const isSubmitted = ref(false);

// 计算已答题数量
const answeredCount = computed(() => {
  // console.log(questions.value);
  return questions.value.filter(q => q.userAnswer !== null).length;
});

// 计算得分
const score = computed(() => {
  return questions.value.filter(q => q.userAnswer === q.correct).length * 20;
});

// 选择答案
const handleOptionSelect = (qIndex, optIndex) => {
  if (!isSubmitted.value) {
    questions.value[qIndex].userAnswer = optIndex;
  }

  // console.log(optIndex);
  console.log(questions.value);
};

// 提交答案
const handleSubmit = () => {
  isSubmitted.value = true;
};

// 重置答题
const handleReset = () => {
  questions.value.forEach(q => {
    q.userAnswer = null;
  });
  isSubmitted.value = false;
};
</script>

<style scoped>
.english-quiz-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  line-height: 1.7;
}

/* 导航栏样式 */
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  color: black;
  border-radius: 8px;
  margin-bottom: 30px;
}

.quiz-nav h2 {
  margin: 0;
  font-weight: 600;
}

.quiz-stats {
  display: flex;
  gap: 15px;
  font-size: 14px;
}

.separator {
  color: #bbb;
}

.score {
  color: #4cd964;
  font-weight: 500;
}

/* 题目区域样式 */
.questions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.question-block {
  background-color: #fff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.question-block.completed {
  border-left: 4px solid #3498db;
}

.question-block.correct {
  border-left: 4px solid #2ecc71;
  background-color: #f8fffa;
}

.question-block.incorrect {
  border-left: 4px solid #e74c3c;
  background-color: #fff5f5;
}

.question-header {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.question-index {
  font-weight: bold;
  color: #2c3e50;
  min-width: 28px;
  font-size: 18px;
}

.question-text {
  margin: 0;
  font-size: 18px;
  color: #2c3e50;
}

/* 选项样式 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.option-item:hover:not(.selected):not(:has(input:disabled)) {
  background-color: #f5f8ff;
  border-color: #c9d1e0;
}

.option-input {
  margin-right: 15px;
  width: 18px;
  height: 18px;
  accent-color: #3498db;
}

.option-letter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background-color: #e9ecef;
  color: #495057;
  border-radius: 4px;
  margin-right: 15px;
  font-weight: 600;
}

.option-item.selected {
  background-color: #eef7ff;
  border-color: #3498db;
}

.option-item.selected .option-letter {
  background-color: #3498db;
  color: white;
}

.option-item.correct {
  background-color: #f0fff4;
  border-color: #2ecc71;
}

.option-item.correct .option-letter {
  background-color: #2ecc71;
  color: white;
}

.option-item.wrong {
  background-color: #fff5f5;
  border-color: #e74c3c;
}

.option-item.wrong .option-letter {
  background-color: #e74c3c;
  color: white;
}

/* 解析样式 */
.explanation {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #e1e4e8;
}

.explanation h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 16px;
}

.explanation p {
  margin: 0;
  color: #495057;
  font-size: 15px;
  line-height: 1.6;
}

/* 按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 30px;
}

.submit-btn, .reset-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.submit-btn {
  background-color: #3498db;
  color: white;
}

.submit-btn:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.submit-btn:disabled {
  background-color: #a0c4e7;
  cursor: not-allowed;
}

.reset-btn {
  background-color: #f1f3f5;
  color: #495057;
}

.reset-btn:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .question-block {
    padding: 20px 15px;
  }
  
  .question-text {
    font-size: 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .submit-btn, .reset-btn {
    width: 100%;
    max-width: 300px;
  }
}
</style>